<template>
  <div class="main">

      <div class="bottomNav">
          <van-tabbar v-model="active" @change="onChange" active-color=" #20CAC8" inactive-color="#8B8398" route>
              <van-tabbar-item :icon="active === index ? item.icon2 : item.icon1" :to="item.name"
                  v-for="(item, index) in bottomNav" :key="index">{{ item.title }}</van-tabbar-item>
          </van-tabbar>
      </div>

      <router-view></router-view>
  </div>
</template>

<script>
import bottomNav from "../../public/json/navBack.json"
import {mapMutations} from 'vuex'
export default {
  name: "Main",
  data() {
      return {
          bottomNav,
          active: 0
      }
  },
  created() {
        
      this.setIsMain(true);
  },
  methods: {
      onChange(index) {
          if (this.active === index) {
              return;
          }
          this.active = index
      },
      //修改vueX的isMain
      ...mapMutations(['setIsMain'])
  },
}
</script>

<style lang="less" scoped>
.bottomNav {
  position: fixed;
  z-index: 888;

  .van-tabbar {
      height: 60px;
      background-color: #1B0931;
      // background-color: red;
      // color: #54FFF4 ;
  }

  /deep/.van-tabbar-item__icon .van-icon {
      height: 33px;

      img {
          width: 100%;
          display: block;
          height: 100%;
      }
  }
}
</style>